<template>
	<up-popup v-model:show="show" :round="30">
		<view class="content column">
			<view class="closeIcon" @click="show = false">
				<image src="@/static/arrow-left.png" mode="widthFix"></image>
			</view>

			<view class="qrImg center">
				<image :src="qrImg" mode="widthFix" class="qrImg"></image>
			</view>

			<view class="hint">请用微信扫二维码</view>

			<view class="mask column" v-if="detailInfo.customerId">
				<image src="@/static/preview-sel.png" mode="widthFix"></image>
				<view>{{ detailInfo.status == 1 ? `支付成功..., ${countDown}s后跳转` : '已扫描' }}</view>
			</view>
			<view v-if="detailInfo.customerId" @click="toIndex" class="btn">已完成支付</view>
			<view v-if="detailInfo.customerId" @click="toIndex" class="btn" style="bottom: 5vw">返回首页</view>
		</view>
	</up-popup>
</template>

<script setup>
import { http } from 'uview-plus';
import { ref } from 'vue';
const show = ref(false);

const qrImg = ref('');
const orderSn = ref('');
const detailInfo = ref({});
const countDown = ref(3);

const times = ref(3);

function init(_qrImg, _orderSn) {
	show.value = true;
	orderSn.value = _orderSn;
	qrImg.value = `data:image/png;base64,${_qrImg}`;

	setTimeout(() => {
		getOrder();
	}, 5000);
}

function toIndex() {
	uni.reLaunch({
		url: '/pages/index/index'
	});
}

async function getOrder() {
	const { data } = await http.get(`/open/api/model/queryOrder?orderNo=${orderSn.value}`, {});
	console.log('getOrder==========================', data);
	detailInfo.value = data;

	if (detailInfo.value.status != 1) {
		if (times.value < 30) {
			setTimeout(() => {
				times.value++;
				getOrder();
			}, 3000);
		}
	} else {
		setInterval(() => {
			countDown.value--;
			if (countDown.value == 1) {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		}, 1000);
	}
}

// getOrder();

defineExpose({
	init
});
</script>

<style lang="scss">
.content {
	width: 100vw;
	height: 125vw;
	background: #ffd000;
	border-radius: 7vw 7vw 0vw 0vw;
	position: relative;
	padding-top: 20vw;
	overflow: hidden;

	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 80vh;
		background: rgba(255, 208, 0, 0.5);
		z-index: 20;
		padding-top: 40vw;

		image {
			width: 14vw;
			height: 14vw;
		}

		view {
			font-size: 5vw;
			color: #000000;
			text-align: center;
			margin-top: 4vw;
		}
	}

	.closeIcon {
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		top: 52rpx;
		left: 48rpx;
		z-index: 20;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.qrImg {
		width: 65vw;
		height: 65vw;
		background-color: #fff;
		border-radius: 20rpx;

		image {
			width: 96%;
			height: 96%;
		}
	}

	.hint {
		font-size: 5vw;
		color: #030101;
		text-align: center;
		margin-top: 11vw;
	}

	.btn {
		width: 91vw;
		height: 12vw;
		background: #ffffff;
		border-radius: 6vw;

		font-weight: bold;
		font-size: 4vw;
		color: #000000;
		text-align: center;
		position: absolute;
		bottom: 21vw;
		left: 50%;
		transform: translateX(-50%);
		z-index: 90;
		line-height: 12vw;
	}
}
</style>
